import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, DeviceEventEmitter} from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import { tradePages, advertisePages, minePages, orderPages } from "../../views/pages";
import { messageListener } from "../../utils/socket";
import { i18n } from "../../utils/locales/i18n";

messageListener()
let newMessage = false
DeviceEventEmitter.addListener('newMessage', () => {
	setTimeout(() => {
		newMessage = true
	})
})
DeviceEventEmitter.addListener('read', () => {
	setTimeout(() => {
		newMessage = false
	})
})

const TradeStack = createStackNavigator(tradePages, {
	initialRouteName: 'Trade',
});
TradeStack.navigationOptions = ({ navigation }) => {
	let tabBarVisible = true;
	if (navigation.state.index > 0) {
		tabBarVisible = false;
	}
	return {
		tabBarVisible,
	};
}

const AdvertisementStack = createStackNavigator(advertisePages, {
	initialRouteName: 'Advertisement'
})
AdvertisementStack.navigationOptions = ({ navigation }) => {
	let tabBarVisible = true;
	if (navigation.state.index > 0) {
		tabBarVisible = false;
	}
	return {
		tabBarVisible,
	};
}

const OrderStack = createStackNavigator(orderPages, {
	initialRouteName: 'Order'
})
OrderStack.navigationOptions = ({ navigation }) => {
	let tabBarVisible = true;
	if (navigation.state.index > 0) {
		tabBarVisible = false;
	}
	return {
		tabBarVisible,
	};
}

const MineStack = createStackNavigator(minePages, {
	initialRouteName: 'Mine'
})
MineStack.navigationOptions = ({ navigation }) => {
	let tabBarVisible = true;
	if (navigation.state.index > 0) {
		tabBarVisible = false;
	}
	return {
		tabBarVisible
	};
}

const BottomTabNavigator = createBottomTabNavigator(
	{
		Trade: {
			screen: TradeStack,
			navigationOptions: ({ navigation }) => ({
				tabBarLabel: i18n.t('trade'),
				tabBarIcon: ({ focused }) => {
					if (focused) {
						return (
							<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/trade-active.png')} />
						);
					}
					return (
						<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/trade.png')} />
					);
				},
			}),
		},
		Advertisement: {
			screen: AdvertisementStack,
			navigationOptions: ({ navigation }) => ({
				tabBarLabel: i18n.t('ad'),
				tabBarIcon: ({ focused }) => {
					if (focused) {
						return (
							<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/advertisement-active.png')} />
						);
					}
					return (
						<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/advertisement.png')} />
					);
				},
			}),
		},
		Order: {
			screen: OrderStack,
			navigationOptions: ({ navigation }) => ({
				tabBarLabel: i18n.t('od'),
				tabBarIcon: ({ focused }) => {
					if (focused) {
						return (
							<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/order-active.png')} />
						);
					}
					if (newMessage) {
						return (
							<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/order_dot.png')} />
						);
					} else {
						return (
							<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/order.png')} />
						);
					}
				},
			}),
		},
		Mine: {
			screen: MineStack,
			navigationOptions: ({ navigation }) => ({
				tabBarLabel: i18n.t('mine'),
				tabBarIcon: ({ focused }) => {
					if (focused) {
						return (
							<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/mine-active.png')} />
						);
					}
					return (
						<Image style={styles.tabBarIcon_wallet} source={require('../../images/navigation/mine.png')} />
					);
				}
			}),
		}
	},
	{

		tabBarOptions: {
			activeTintColor: '#ffa500',
			//material design中的波纹颜色(仅支持Android >= 5.0)
			pressColor: '#788493',
			//按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
			pressOpacity: 0.8,
			//是否在切换tab页时使用动画
			animationEnabled: true,
		}
	}

);

const styles = StyleSheet.create({
	tabBarIcon: {
		width: 25,
		height: 25
	}
});


export default BottomTabNavigator


